<template>
  <div class="bench-task">
    <px-row class="h-60" :gutter="16">
      <px-col style="height: 100%" :span="14">
        <BenchCompWrapper class="h-60-child" title="我的任务">
          <template v-slot:content>
            <div class="bench-task-wrapper">
              <div class="flex-column" style="width: 100%">
                <div class="flex-row mb-[4px]">
                  <div
                    :class="['bench-task-common', 'blue', { active: activeTab === 'launch' }]"
                    style="background-color: #eff6ff"
                    @click="activeTab = 'launch'"
                  >
                    <div class="bench-task-item-title">我的发起</div>
                    <div class="bench-task-item-value" style="color: #3b82f6" @click.stop="handleToTaskDetail(0, { taskType: 'LAUNCH' })">
                      {{ taskTableData.launchNumber }}
                    </div>
                    <BenchTaskBg id="1" :color="['#C5DCFF', '#EFF6FF']" class="bench-task-item-bg 1" />
                    <div class="corner-badge" style="background: #3b82f6">未完成</div>
                  </div>
                  <div
                    :class="['bench-task-common', 'pink', { active: activeTab === 'handle' }]"
                    style="background-color: #fee"
                    @click="activeTab = 'handle'"
                  >
                    <div class="bench-task-item-title">我的待办</div>
                    <div
                      class="bench-task-item-value"
                      style="color: #f00"
                      @click.stop="
                        handleToTaskDetail(1, {
                          taskType: 'HANDLE',
                          type: 'UNDO'
                        })
                      "
                    >
                      {{ taskTableData.undoNumber }}
                    </div>
                    <BenchTaskBg id="undoNumberToday" :color="['#FFD4D4', '#FFE7E7']" class="bench-task-item-bg" />
                  </div>
                  <div
                    :class="['bench-task-common', 'pink', { active: activeTab === 'approve' }]"
                    style="background-color: #fee"
                    @click="activeTab = 'approve'"
                  >
                    <div class="bench-task-item-title">我的待审</div>
                    <div
                      class="bench-task-item-value"
                      style="color: #f00"
                      @click.stop="
                        handleToTaskDetail(2, {
                          taskType: 'APPROVE',
                          type: 'UNDO'
                        })
                      "
                    >
                      {{ taskTableData.unApproveNumber }}
                    </div>
                    <BenchTaskBg id="unApproveNumber" :color="['#FFD4D4', '#FFE7E7']" class="bench-task-item-bg" />
                  </div>
                </div>
                <!-- 我的发起 -->
                <div v-if="activeTab === 'launch'" class="tab-content">
                  <div class="flex-row">
                    <span class="tab-title">我的发起</span>
                    <px-button
                      v-has="'ALL_BENCH_TASK_LAUNCH'"
                      style="height: 32px; font-size: 14px; line-height: 32px; color: rgb(0 0 0 / 40%)"
                      type="primary"
                      text
                      link
                      @click="toTaskDetail(0, { type: launchName })"
                    >
                      查看更多
                      <px-icon><ArrowRight /></px-icon>
                    </px-button>
                  </div>
                  <px-table :data="launchTableData" stripe style="width: 100%; height: calc(100% - 31px)" size="small">
                    <px-table-column width="20">
                      <template #default>
                        <div style="width: 4px; height: 4px; margin-left: 5px; background: #3b82f6; border-radius: 50%" />
                      </template>
                    </px-table-column>
                    <px-table-column label="任务名称" prop="taskTitle" min-width="200" show-overflow-tooltip />
                    <px-table-column label="任务来源" prop="taskResource">
                      <template #default="scope">
                        {{ scope.row["taskResource"] || "-" }}
                      </template>
                    </px-table-column>
                    <px-table-column label="任务状态" prop="taskProgress">
                      <template #default="scope">
                        {{ scope.row["taskProgress"] || "-" }}
                      </template>
                    </px-table-column>
                    <px-table-column label="计划完成时间" prop="taskFinishTime" width="130">
                      <template #default="scope">
                        {{ scope.row["taskFinishTime"] || "-" }}
                      </template>
                    </px-table-column>
                    <px-table-column label="操作" align="center" width="100">
                      <template #default="scope">
                        <px-button v-has="'ALL_BENCH_TASK_LAUNCH_VIEW'" link type="primary" @click="handleDetail(scope.row)">详情</px-button>
                      </template>
                    </px-table-column>
                  </px-table>
                </div>
                <!-- 我的待办 -->
                <div v-if="activeTab === 'handle'" class="tab-content">
                  <div class="flex-row">
                    <span class="tab-title">我的待办</span>
                    <px-button
                      v-has="'ALL_BENCH_TASK_HANDLE'"
                      style="height: 32px; font-size: 14px; line-height: 32px; color: rgb(0 0 0 / 40%)"
                      type="primary"
                      text
                      link
                      @click="toTaskDetail(1, { type: handleName })"
                    >
                      查看更多
                      <px-icon><ArrowRight /></px-icon>
                    </px-button>
                  </div>
                  <px-table :data="handleTableData" stripe style="width: 100%; height: calc(100% - 31px)" size="small">
                    <px-table-column width="20">
                      <template #default>
                        <div style="width: 4px; height: 4px; margin-left: 5px; background: #3b82f6; border-radius: 50%" />
                      </template>
                    </px-table-column>
                    <px-table-column label="任务名称" prop="taskTitle" min-width="200" show-overflow-tooltip />
                    <px-table-column label="任务来源" prop="taskResource">
                      <template #default="scope">
                        {{ scope.row["taskResource"] || "-" }}
                      </template>
                    </px-table-column>
                    <px-table-column label="任务状态" prop="taskProgress">
                      <template #default="scope">
                        {{ scope.row["taskProgress"] || "-" }}
                      </template>
                    </px-table-column>
                    <px-table-column label="计划完成时间" prop="taskFinishTime" width="130">
                      <template #default="scope">
                        {{ scope.row["taskFinishTime"] || "-" }}
                      </template>
                    </px-table-column>
                    <px-table-column label="操作" align="center" width="100">
                      <template #default="scope">
                        <px-button v-has="'ALL_BENCH_TASK_HANDLE_VIEW'" link type="primary" @click="handleClick(scope.row)">详情</px-button>
                      </template>
                    </px-table-column>
                  </px-table>
                </div>
                <!-- 我的审批 -->
                <div v-if="activeTab === 'approve'" class="tab-content">
                  <div class="flex-row">
                    <span class="tab-title">我的待审</span>
                    <px-button
                      v-has="'ALL_BENCH_TASK_APPROVE'"
                      style="height: 32px; font-size: 14px; line-height: 32px; color: rgb(0 0 0 / 40%)"
                      type="primary"
                      text
                      link
                      @click="toTaskDetail(2, { type: approveName })"
                    >
                      查看更多
                      <px-icon><ArrowRight /></px-icon>
                    </px-button>
                  </div>
                  <px-table :data="approveTableData" stripe style="width: 100%; height: calc(100% - 31px)" size="small">
                    <px-table-column width="20">
                      <template #default>
                        <div style="width: 4px; height: 4px; margin-left: 5px; background: #3b82f6; border-radius: 50%" />
                      </template>
                    </px-table-column>
                    <px-table-column label="任务名称" prop="taskTitle" min-width="200" show-overflow-tooltip />
                    <px-table-column label="任务来源" prop="taskResource">
                      <template #default="scope">
                        {{ scope.row["taskResource"] || "-" }}
                      </template>
                    </px-table-column>
                    <px-table-column label="任务状态" prop="taskProgress">
                      <template #default="scope">
                        {{ scope.row["taskProgress"] || "-" }}
                      </template>
                    </px-table-column>
                    <px-table-column label="计划完成时间" prop="taskFinishTime" width="130">
                      <template #default="scope">
                        {{ scope.row["taskFinishTime"] || "-" }}
                      </template>
                    </px-table-column>
                    <px-table-column label="操作" align="center" width="100">
                      <template #default="scope">
                        <px-button v-has="'ALL_BENCH_TASK_APPROVE_VIEW'" link type="primary" @click="handleDetail(scope.row)">详情</px-button>
                      </template>
                    </px-table-column>
                  </px-table>
                </div>
              </div>
            </div>
          </template>
        </BenchCompWrapper>
      </px-col>
      <px-col style="height: 100%" :span="10">
        <BenchCompWrapper class="h-60-child" title="我的日程" titleWidth="281">
          <template v-slot:content>
            <Canlendar
              v-model:currentDate="currentDate"
              :calendarData="calendarData"
              :currentMonth="currentMonth"
              @getData="getMycalendar"
              @handleClick="handleClick"
            />
          </template>
          <template v-slot:btn>
            <div class="flex-row">
              <div class="bench-canlendar-title">
                <span>{{ renderDate(currentDate) }}</span>
                <div class="icon-group">
                  <px-icon @click="selectDate('prev-month')"><ArrowLeft /></px-icon>
                  <px-icon @click="selectDate('next-month')"><ArrowRight /></px-icon>
                </div>
              </div>
              <px-button
                v-has="'ALL_BENCH_TASK_CANLENDAR'"
                style="height: 32px; font-size: 14px; line-height: 32px; color: rgb(0 0 0 / 40%)"
                type="primary"
                text
                link
                @click="toTaskDetail(4)"
              >
                查看更多
                <px-icon><ArrowRight /></px-icon>
              </px-button>
            </div>
          </template>
        </BenchCompWrapper>
      </px-col>
    </px-row>
    <px-row class="h-40" :gutter="16">
      <px-col :span="8" style="height: 100%">
        <BenchCompWrapper class="h-40-child" titleWidth="280" style="margin-bottom: 0">
          <template v-slot:title>
            <div>
              <span>公告</span><span class="un-read">未读（{{ unRead }}）</span>
            </div>
          </template>
          <template v-slot:content>
            <div class="bench-task-table">
              <px-table
                v-if="announcementData?.length"
                :data="announcementData"
                stripe
                style="width: 100%; height: calc(100% - 12px); margin-top: 12px"
                size="small"
              >
                <px-table-column width="20">
                  <template #default="scope">
                    <div
                      :style="`width: 4px; height: 4px; margin-left: 5px; background: ${scope.row.isRead === 'NO' ? '#3b82f6' : 'rgba(0, 0, 0, 0.5)'}; border-radius: 50%`"
                    />
                  </template>
                </px-table-column>
                <px-table-column prop="title" label="公告标题" min-width="100" show-overflow-tooltip>
                  <template #default="scope">
                    <span
                      :style="`cursor: pointer;color:${scope.row.isRead === 'NO' ? '#3b82f6' : 'rgba(0, 0, 0, 0.5)'}`"
                      @click="handleClickAnnouncementRow(scope.row)"
                      >{{ scope.row.title }}</span
                    >
                  </template>
                </px-table-column>
                <px-table-column prop="publishTime" label="发布日期" min-width="100" show-overflow-tooltip>
                  <template #default="scope">
                    <span :style="`color:${scope.row.isRead === 'NO' ? '#4F4F4F' : 'rgba(0, 0, 0, 0.5)'}`">{{ scope.row.publishTime }}</span>
                  </template>
                </px-table-column>
                <px-table-column prop="createByName" label="创建人" width="120" show-overflow-tooltip>
                  <template #default="scope">
                    <span :style="`color:${scope.row.isRead === 'NO' ? '#4F4F4F' : 'rgba(0, 0, 0, 0.5)'}`">{{ scope.row.createByName }}</span>
                  </template>
                </px-table-column>
                <px-table-column v-if="showAction()" prop="isTop" label="操作" width="50">
                  <template #default="scope">
                    <px-tooltip class="box-item" content="取消置顶" placement="top">
                      <px-button
                        v-show="scope.row.isTop === 'YES'"
                        v-has="'ALL_BENCH_TASK_ANNOUNCEMENT_NOTOP'"
                        link
                        type="primary"
                        @click="cancelTop(scope.row)"
                      >
                        <NoTopSvg class="content-icon" />
                      </px-button>
                    </px-tooltip>
                  </template>
                </px-table-column>
              </px-table>
              <px-empty v-else :image-size="100" description="暂时没有数据" />
            </div>
          </template>
          <template v-slot:btn>
            <px-button
              v-has="'ALL_BENCH_TASK_ANNOUNCEMENT'"
              style="height: 32px; font-size: 14px; line-height: 32px; color: rgb(0 0 0 / 40%)"
              type="primary"
              text
              link
              @click="toTaskDetail(3)"
            >
              查看更多
              <px-icon><ArrowRight /></px-icon>
            </px-button>
          </template>
        </BenchCompWrapper>
      </px-col>
      <px-col :span="8" style="height: 100%">
        <BenchCompWrapper class="h-40-child" title="通讯录" titleWidth="280" style="margin-bottom: 0">
          <template v-slot:content>
            <div class="bench-task-table">
              <px-table
                v-if="fixedPhoneBook?.length"
                :data="fixedPhoneBook"
                stripe
                :show-header="false"
                style="width: 100%; height: calc(100% - 12px); margin-top: 12px"
                size="small"
              >
                <px-table-column width="20">
                  <template #default>
                    <div style="width: 4px; height: 4px; margin-left: 5px; background: #3b82f6; border-radius: 50%" />
                  </template>
                </px-table-column>
                <px-table-column prop="relatedName" label="单位/部门" min-width="74" show-overflow-tooltip />
                <px-table-column prop="name" label="姓名" min-width="60" show-overflow-tooltip />
                <px-table-column prop="phone" label="电话" min-width="100" show-overflow-tooltip />
                <px-table-column prop="phone" label="" width="30">
                  <template #default="scope">
                    <px-tooltip content="取消固定在首页" placement="top">
                      <px-button
                        v-has="'ALL_BENCH_TASK_PHONEBOOK_COMMONLY_CANCEL'"
                        :src="NoTopSvg"
                        class="ding"
                        link
                        type="primary"
                        @click="handleDeleteCollectPhone(scope.row)"
                      >
                        <NoTopSvg class="content-icon" /> </px-button
                    ></px-tooltip>
                  </template>
                </px-table-column>
              </px-table>
              <px-empty v-else :image-size="100" description="暂时没有数据" />
            </div>
          </template>
          <template v-slot:btn>
            <div class="flex-row">
              <px-select
                v-model="teleInput"
                style="width: 131px; margin-right: 24px"
                clearable
                remote
                filterable
                placeholder="搜索"
                :suffix-icon="Search"
                :remote-method="remoteMethod"
                reserve-keyword
                remote-show-suffix
                :loading="loading"
              >
                <px-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" @click="teleInput = ''">
                  <div class="tele-option">
                    <px-tooltip :content="getTooltipContent(item)">
                      <px-text truncated>
                        {{ (item as any).name || "未知" }}（{{ [(item as any).relatedName || "未知", , (item as any).phone || "未知"].join("-") }}）
                      </px-text>
                    </px-tooltip>
                    <div class="ding-box">
                      <div v-if="handleIsUse(item)">
                        <px-tooltip content="取消固定在首页" placement="right">
                          <px-button v-has="'ALL_BENCH_TASK_PHONEBOOK_COMMONLY_CANCEL'" link @click.stop="handleDeleteCollectPhone(item)">
                            <NoTopSvg class="content-icon" /> </px-button
                        ></px-tooltip>
                      </div>
                      <div v-else>
                        <px-tooltip content="固定在首页" placement="right">
                          <img v-has="'ALL_BENCH_TASK_PHONEBOOK_COMMONLY'" :src="DingPng" class="ding" @click.stop="handleCreateHotline(item)"
                        /></px-tooltip>
                      </div>
                    </div>
                  </div>
                </px-option>
              </px-select>
              <px-button
                v-has="'ALL_BENCH_TASK_PHONEBOOK'"
                style="height: 32px; font-size: 14px; line-height: 32px; color: rgb(0 0 0 / 40%)"
                type="primary"
                text
                link
                @click="toTaskDetail(5)"
              >
                管理
                <px-icon><ArrowRight /></px-icon>
              </px-button>
            </div>
          </template>
        </BenchCompWrapper>
      </px-col>
      <px-col :span="8" style="height: 100%">
        <BenchCompWrapper class="h-40-child" title="热线电话" titleWidth="280" style="margin-bottom: 0">
          <template v-slot:content>
            <div class="bench-task-table">
              <px-table
                v-if="hotLine?.length"
                :data="hotLine"
                stripe
                style="width: 100%; height: calc(100% - 12px); margin-top: 12px"
                size="small"
                :show-header="false"
              >
                <px-table-column width="20">
                  <template #default>
                    <div style="width: 4px; height: 4px; margin-left: 5px; background: #3b82f6; border-radius: 50%" />
                  </template>
                </px-table-column>
                <px-table-column prop="relatedName" min-width="100" show-overflow-tooltip />
                <px-table-column prop="phone" min-width="100" show-overflow-tooltip />
              </px-table>
              <px-empty v-else :image-size="100" description="暂时没有数据" />
            </div>
          </template>
          <template v-slot:btn>
            <px-button
              v-has="'ALL_BENCH_TASK_HOTLINE'"
              style="height: 32px; font-size: 14px; line-height: 32px; color: rgb(0 0 0 / 40%)"
              type="primary"
              text
              link
              @click="toTaskDetail(6)"
            >
              管理
              <px-icon><ArrowRight /></px-icon>
            </px-button>
          </template>
        </BenchCompWrapper>
      </px-col>
    </px-row>
    <ScheduleDetail v-model:dialogVisible="scheduleDetailVisible" :data="scheduleDetailData" @refresh="refreshTask" />
  </div>
</template>

<script setup lang="ts">
import {
  MyCalendar,
  announcementPersonal,
  cancelTopAnnouncement,
  deleteCollectPhone,
  fixedCommunication,
  getAnnouncement,
  getTaskList,
  listPhone,
  personalAnnouncement,
  queryFixedCommunication,
  queryTaskList,
  queryUseHotline
} from "@/api/bench";
import DingPng from "@/assets/images/bench/ding.png";
import NoTopSvg from "@/assets/svg/bench/noTop.svg?component";
import { Search } from "@px-ui/icons-vue";
import dayjs from "dayjs";
import { PxMessage } from "px-ui";
import { onActivated, onMounted, reactive, ref, toRefs } from "vue";
import { LocationQueryRaw, useRouter } from "vue-router";
import ScheduleDetail from "../../task/canlendar/components/ScheduleDetail/index.vue";
import BenchCompWrapper from "./BenchCompWrapper.vue";
import BenchTaskBg from "./BenchTaskBg.vue";
import Canlendar from "./Canlendar.vue";

const router = useRouter();
const state = reactive<any>({
  taskTableData: {
    launchNumber: "-",
    undoNumber: "-",
    undoNumberToday: "-",
    doneNumber: "-",
    doneNumberWeek: "-",
    unApproveNumber: "-",
    approvedNumber: "-",
    approvedNumberWeek: "-"
  },
  launchName: "UNDO",
  handleName: "UNDO",
  approveName: "UNDO",
  lauchTabList: [],
  handleTabList: [],
  approveTabList: [],
  launchTableData: [],
  handleTableData: [],
  approveTableData: [],
  announcementData: [],
  phoneBook: [],
  fixedPhoneBook: [],
  hotLine: [],
  teleInput: "",
  unRead: 0,
  activeTab: "launch"
});
const {
  taskTableData,
  launchName,
  handleName,
  approveName,
  lauchTabList,
  handleTabList,
  approveTabList,
  launchTableData,
  handleTableData,
  approveTableData,
  announcementData,
  unRead,
  fixedPhoneBook,
  hotLine,
  activeTab,
  teleInput
} = toRefs(state);
interface ListItem {
  value: string;
  label: string;
}
const options = ref<ListItem[]>([]);
const loading = ref(false);
onMounted(() => {
  queryTable();
});
onActivated(() => {
  currentMonth.value = null;
  queryTable();
});
const showAction = () => {
  const data = announcementData.value?.filter(item => item.isTop === "YES");
  return data?.length > 0;
}; // 取消置顶
const cancelTop = async row => {
  await cancelTopAnnouncement({ ...row });
  PxMessage.success("取消置顶成功");
  getAnnouncementPersonal();
};

const selectDate = val => {
  if (val === "prev-month") {
    currentDate.value = dayjs(currentDate.value).subtract(1, "month");
  } else {
    currentDate.value = dayjs(currentDate.value).add(1, "month");
  }
  getMycalendar();
};
const getTooltipContent = (item: any) => {
  return `${item.name || "未知"}（${[item.relatedName || "未知", , item.phone || "未知"].join("-")} ）`;
};
const updateKey = ref();
const refreshTask = async () => {
  taskTableData.value = await getTaskList();
  handleTabList.value = [
    {
      name: "UNDO",
      label: `我的待办（${taskTableData.value?.undoNumber}）`
    },
    {
      name: "DONE",
      label: `我的已办（${taskTableData.value?.doneNumber}）`
    }
  ];
  handleTabSelected(handleName.value);
  getMycalendar();
  updateKey.value = new Date().getTime();
};
const renderDate = date => {
  return dayjs(date).format("YYYY年MM月");
};
const queryTaskTableData = async () => {
  taskTableData.value = await getTaskList();
  lauchTabList.value = [
    {
      name: "UNDO",
      label: `未完成（${taskTableData.value?.launchNumber}）`
    },
    {
      name: "DONE",
      label: `已完成（${taskTableData.value?.launchedNumber}）`
    }
  ];
  handleTabList.value = [
    {
      name: "UNDO",
      label: `我的待办（${taskTableData.value?.undoNumber}）`
    },
    {
      name: "DONE",
      label: `我的已办（${taskTableData.value?.doneNumber}）`
    }
  ];
  approveTabList.value = [
    {
      name: "UNDO",
      label: `我的待审（${taskTableData.value?.unApproveNumber}）`
    },
    {
      name: "DONE",
      label: `我的已审（${taskTableData.value?.approvedNumber}）`
    }
  ];
};
// 查询列表
const queryTable = async () => {
  queryTaskTableData();
  getLaunchTable();
  getHandleUnDoTable();
  getApproveUnDoTable();
  getAnnouncementPersonal();
  getPersonalAnnouncementUnread();
  getQueryFixedCommunication();
  getUseHotline();
  getMycalendar();
  updateKey.value = new Date().getTime();
};
const currentDate = ref();
const calendarData = ref({});
const currentMonth = ref();
// 获取我的日程
const getMycalendar = async () => {
  const oDate = currentDate.value ? new Date(currentDate.value) : new Date();
  const oYear = oDate.getFullYear();
  const oMonth = oDate.getMonth() + 1;
  if (currentMonth.value === oMonth) {
    return;
  }
  currentMonth.value = oMonth;
  calendarData.value = {};
  const data: any = await MyCalendar({ year: oYear, month: oMonth });
  data.forEach(item => {
    calendarData.value[item.date] = item.taskList;
  });
};
const scheduleDetailVisible = ref(false);
const scheduleDetailData = ref();
// 跳转日程与代办详情
const handleClick = data => {
  if (data.taskResource === "我的日程") {
    // 1、手动添加日程
    scheduleDetailVisible.value = true;
    scheduleDetailData.value = data;
  } else {
    // 2、任务流转日程
    if (data?.taskResourceUrl) {
      if (/^http/.test(data.taskResourceUrl)) {
        window.open(data.taskResourceUrl);
      } else {
        router.push(data.taskResourceUrl);
      }
    } else {
      PxMessage.error("请配置正确的跳转地址");
    }
  }
};
// 打开详情
const handleDetail = row => {
  if (!row.taskResourceUrl) {
    PxMessage.error("请配置正确的跳转地址");
    return;
  }
  if (/^http/.test(row.taskResourceUrl)) {
    window.open(row.taskResourceUrl);
  } else {
    router.push(row.taskResourceUrl);
  }
};
// 获取我的发起
const getLaunchTable = async (taskStatus = "UNDO") => {
  const params = {
    pageNum: 1,
    pageSize: 10,
    taskType: "LAUNCH",
    taskStatus
  };
  const data: any = await queryTaskList(params);
  launchTableData.value = data.data;
};
// 获取我的待办-待办
const getHandleUnDoTable = async () => {
  const params = {
    pageNum: 1,
    pageSize: 10,
    taskType: "HANDLE",
    taskStatus: "UNDO"
  };
  const data: any = await queryTaskList(params);
  handleTableData.value = data.data;
};
// 获取我的待办-已办
const getHandleDoneTable = async () => {
  const params = {
    pageNum: 1,
    pageSize: 10,
    taskType: "HANDLE",
    taskStatus: "DONE"
  };
  const data: any = await queryTaskList(params);
  handleTableData.value = data.data;
};
// 获取我的审批-待审
const getApproveUnDoTable = async () => {
  const params = {
    pageNum: 1,
    pageSize: 10,
    taskType: "APPROVE",
    taskStatus: "UNDO"
  };
  const data: any = await queryTaskList(params);
  approveTableData.value = data.data;
};
// 获取我的审批-已审
const getApproveDoneTable = async () => {
  const params = {
    pageNum: 1,
    pageSize: 10,
    taskType: "APPROVE",
    taskStatus: "DONE"
  };
  const data: any = await queryTaskList(params);
  approveTableData.value = data.data;
};
// 切换我的发起-已完成
const launchTabSelected = selectName => {
  launchName.value = selectName;
  getLaunchTable(selectName);
};
// 切换我的待办-已办
const handleTabSelected = selectName => {
  handleName.value = selectName;
  if (selectName === "UNDO") {
    getHandleUnDoTable();
  } else if (selectName === "DONE") {
    getHandleDoneTable();
  }
};
// 切换我的待审-已审
const approveTabSelected = selectName => {
  approveName.value = selectName;
  if (selectName === "UNDO") {
    getApproveUnDoTable();
  } else if (selectName === "DONE") {
    getApproveDoneTable();
  }
};
// 获取公告
const getAnnouncementPersonal = async () => {
  const res: any = await announcementPersonal({ pageSize: 5, pageNum: 1 });
  announcementData.value = res.data;
};
// 获取公告未读
const getPersonalAnnouncementUnread = async () => {
  const data: any = await personalAnnouncement();
  unRead.value = data?.unreadNumber || 0;
};
// 点击我的公告
const handleClickAnnouncementRow = async row => {
  const permissionList = localStorage.getItem("permissionList");
  const pl = permissionList.split(",");
  if (!pl.includes("ALL_BENCH_TASK_ANNOUNCEMENT_DETAIL")) {
    return PxMessage.error("暂无权限，请联系管理员");
  }
  const { id, serialNumber } = row;
  const data = await getAnnouncement({ id, serialNumber });
  if (data) {
    router.push(`/all/bench/task/announcement/detail?pageType=3&id=${id}&serialNumber=${serialNumber}`);
  } else {
    PxMessage.warning("该公告已被撤销，请刷新页面");
  }
};
const handleIsUse = item => {
  const flag = fixedPhoneBook.value.find(phoneItem => phoneItem.empNo === item.empNo);
  return flag;
};
// 通讯录-固定在首页
const handleCreateHotline = async row => {
  await fixedCommunication(row);
  PxMessage.success("已固定在首页");
  getQueryFixedCommunication();
};
// 通讯录-取消固定在首页
const handleDeleteCollectPhone = async row => {
  await deleteCollectPhone(row);
  PxMessage.success("已取消固定在首页");
  getQueryFixedCommunication();
};
// 通讯录查询
const remoteMethod = async (query: string) => {
  if (query) {
    loading.value = true;
    const data: any = await listPhone({ name: query });
    options.value = (data || []).map(item => ({ ...item, label: getTooltipContent(item), value: item.id }));
    loading.value = false;
  } else {
    options.value = [];
  }
};
// 获取常用通讯录
const getQueryFixedCommunication = async () => {
  const data = await queryFixedCommunication();
  fixedPhoneBook.value = data;
};
// 获取热线电话
const getUseHotline = async () => {
  const data = await queryUseHotline();
  hotLine.value = data;
};
const detailRoutes = [
  "/all/bench/task/launch",
  "/all/bench/task/handle",
  "/all/bench/task/approve",
  "/all/bench/task/announcement",
  "/all/bench/task/canlendar",
  "/all/bench/task/phoneBook",
  "/all/bench/task/hotline"
];
const getTimeRange = (day = 1) => {
  let now = new Date();
  let startTime = "";
  let endTime = dayjs().format("YYYY-MM-DD");
  let sevenDaysAgo = new Date(now.getTime() - day * 24 * 60 * 60 * 1000); // 7天 = 24 * 60 * 60 * 1000 毫秒
  startTime = dayjs(sevenDaysAgo).format("YYYY-MM-DD");

  return { startTime, endTime };
};
const handleToTaskDetail = (val, query: any) => {
  let params: any = { ...query };
  if (query.taskType === "HANDLE" && query.type === "UNDO") {
    params = { ...params };
  }
  if ((query.taskType === "HANDLE" && query.type === "DONE") || (query.taskType === "APPROVE" && query.type === "DONE")) {
    const timeRange = getTimeRange(6);
    params = { ...params, ...timeRange };
  }
  toTaskDetail(val, params);
};
// 跳转到工作台详情页面
const toTaskDetail = (val, query?: LocationQueryRaw) => {
  const path = detailRoutes[val];
  if (path) {
    query
      ? router.push({
          path,
          query
        })
      : router.push(path);
  }
};
</script>

<style lang="scss" scoped>
.bench-task {
  width: 100%;
  height: calc(100vh - 324px);
  overflow: hidden;
  font-size: 12px;
}

.flex-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tab-content {
  flex-grow: 1;
  height: calc(100% - 140px);
}

.h-60 {
  height: 60%;
  min-height: 291px;
  overflow: hidden;

  .h-60-child {
    display: flex;
    flex-direction: column;
    height: calc(100% - 16px);
    overflow: hidden;
  }
}

.h-40 {
  height: 40%;
  overflow: hidden;

  .h-40-child {
    height: 100%;
    overflow: hidden;
  }
}

.bench-task-table {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 12px;
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ding {
  width: 14px;
  height: 14px;
  margin: 0 auto;
  cursor: pointer;
}

.bench-canlendar-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.icon-group {
  display: flex;
  margin-right: 33px;
  margin-left: 16px;
}

:deep(.px-icon) {
  cursor: pointer;
}

.tab-title {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  color: #4b4b4b;
}

.tele-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 200px;
  max-width: 300px;

  .ding-box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    line-height: 20px;
  }
}

.bench-task-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: calc(100% - 12px);
  margin-top: 12px;

  .bench-task-common {
    position: relative;
    display: flex;
    align-items: center;
    width: 32%;
    height: 68px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;

    &.blue.active {
      border: 1px solid #3b82f6;
    }

    &.pink.active {
      border: 1px solid #f00;
    }

    .bench-task-item-title {
      position: absolute;
      top: 8px;
      left: 11px;
      font-size: 14px;
    }

    .bench-task-item-value {
      position: absolute;
      bottom: 8px;
      left: 11px;
      z-index: 10;
      font-size: 24px;
      line-height: 33px;
      cursor: pointer;
    }

    .bench-task-item-bg {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .corner-badge {
      position: absolute;
      top: 0;
      right: 0;
      width: 46px;
      height: 27px;
      padding-left: 5px;
      clip-path: path("M 0 0 A 46 27 0 0 0 46 27 L 46 0 Z");
      font-size: 12px;
      line-height: 24px;
      color: #fff;
      text-align: center;
    }
  }
}

.un-read {
  margin-left: 4px;
  font-size: 16px;
  color: #878f9b;
}

:deep(.px-empty) {
  padding-top: 28px;
  padding-bottom: 25px;

  .px-empty__description {
    margin-top: 0;
  }
}

:deep(.px-button) {
  & > span {
    font-size: 12px;
  }
}

:deep(.px-select) {
  .px-input .px-select__caret.is-reverse {
    transform: rotate(0);
  }
}

:deep(.px-table) {
  font-size: 14px;

  th {
    height: 28px !important;
  }

  th.px-table__cell {
    font-size: 12px;
    color: #000;
    border: none;
    background: rgba(231, 238, 251, 0.5);
  }

  .px-table__body tr.px-table__row:nth-child(odd) {
    background-color: #fff;

    &:hover > td.px-table__cell {
      background-color: transparent !important;
    }
  }
  // &.px-table--striped .px-table__body tr

  &.px-table--striped .px-table__body tr {
    &.px-table__row--striped td.px-table__cell {
      background-color: rgb(231 238 251 / 50%);
    }

    td.px-table__cell {
      height: 28px !important;
      font-size: 12px;
    }
  }

  .px-table__cell {
    padding: 2px 0;
  }

  .px-table__inner-wrapper::before {
    height: 0;
  }

  td.px-table__cell {
    border-bottom: 0;
  }
}
</style>
